<script lang="ts" setup>
import type { PlusColumn } from 'plus-pro-components'

import { ElStep, ElSteps } from 'element-plus'

import { typeOptions } from '../constant'
import { formTypeEunm } from './index'
import { use } from 'vxe-table'

const props = defineProps(['applyproductlist','areaList', 'form', 'loading', 'type'])

const emits = defineEmits(['close', 'submit'])
const { applyproductlist,areaList, form, loading, type } = toRefs(props)

const currentAreaList = computed(() => {
    return areaList?.value.find((item: any) => item.code === form.value.cityCode?.split('-')[0])?.areaList || []
})

const columns: PlusColumn[] = [
    {
        colProps: {
            span: 12,
        },
        label: '登记人姓名',
        prop: 'applicantName',
        valueType: 'copy',
    },
    {
        colProps: {
            span: 12,
        },
        label: '登记人电话',
        prop: 'applicantPhone',
        valueType: 'copy',
    },
    {
        colProps: {
            span: 12,
        },
        label: '产品名称',
        options: computed(() => {
            return applyproductlist?.value.map((item: any) => {
                return {
                    label: item.name,
                    value: item.id,
                }
            })
        }),
        prop: 'productId',
        valueType: 'select',
    },
   
    {
        colProps: {
            span: 12,
        },
        fieldProps: { disabled: true },
        label: '业务类型',
        options: typeOptions,
        prop: 'type',
        valueType: 'select',
    },
    {
        colProps: {
            span: 12,
        },
        fieldProps: { disabled: true },
        label: '银行网点名称',
        options: computed(() => {
            return applyproductlist?.value.map((item: any) => {
                return {
                    label: item.financialName,
                    value: item.financialId,
                }
            })
        }),
        prop: 'financialId',
        valueType: 'select',
    },
    {
        colProps: {
            span: 12,
        },
        fieldProps: { disabled: true },
        label: '银行机构编码',
        prop: 'financialCode',
        valueType: 'copy',
    },
      {
        colProps: {
            span: 12,
        },
        label: '所属城市',
        options: computed(() => {
            return areaList?.value.map((item: any) => {
                return {
                    label: item.name,
                    value: `${item.code}-${item.name}`,
                }
            })
        }),
        prop: 'cityCode',
        valueType: 'select',
    },
     {
        colProps: {
            span: 12,
        },
        label: '所属区域',
        options: computed(() => {
            return currentAreaList.value?.map((item: any) => {
                return {
                    label: item.name,
                    value: `${item.code}-${item.name}`,
                }
            })
        }),
        prop: 'areaCode',
        valueType: 'select',
    },
    {
        colProps: {
            span: 12,
        },
        label: '办理人姓名',
        prop: 'operatorName',
        valueType: 'copy',
    },
    {
        colProps: {
            span: 12,
        },
        label: '办理人手机号',
        prop: 'operatorPhone',
        valueType: 'copy',
    },
    {
        colProps: {
            span: 12,
        },
        fieldProps: { min: 0, precision: 0 },
        label: '授信额度',
        prop: 'creditLimit',
        valueType: 'input-number',
    },
    {
        colProps: {
            span: 12,
        },
        fieldProps: { max: 100, min: 0, precision: 2 },
        label: '授信利率',
        prop: 'interestRate',
        valueType: 'input-number',
    },
    {
        colProps: {
            span: 12,
        },
        label: '申请状态',
        options: [
            {
                label: '已申请',
                value: 1,
            },
            {
                label: '已受理',
                value: 2,
            },
            {
                label: '审批中',
                value: 3,
            },
            {
                label: '已办结',
                value: 4,
            },
        ],
        prop: 'status',
        valueType: 'select',
    },
    {
        colProps: {
            span: 12,
        },
        label: '备注',
        prop: 'remark',
        valueType: 'copy',
    },
    {
        colProps: {
            span: 12,
        },
        hideInForm: computed(() => form?.value.status !== 4),
        label: '办结意见',
        prop: 'message',
        valueType: 'copy',
    },
    { hasLabel: false, label: 'step', prop: 'step' },
]

const rules = {
    applicantName: [
        {
            message: '请输入登记人姓名',
            required: true,
        },
    ],
    cityCode: [
        {
            message: '请选择所属城市',
            required: true,
        },
    ],
    applicantPhone: [
        {
            message: '请输入登记人电话',
            required: true,
        },
    ],
    productId: [
        {
            message: '请选择产品',
            required: true,
        },
    ],
    status: [
        {
            message: '请选择申请状态',
            required: true,
        },
    ],
}

function mySubmit() {
    emits('submit')
}

const showSubmit = computed(() => {
    return type?.value === formTypeEunm.add || type?.value === formTypeEunm.handle
})
const showStep = computed(() => {
    return (type?.value === formTypeEunm.detail || type?.value === formTypeEunm.handle) && form?.value.step && form?.value.step?.length
})
</script>

<template>
    <el-card>
        <PlusForm v-model="form"
                  :columns="columns"
                  :rules="rules"
                  label-width="100"
                  :row-props="{ gutter: 20 }"
                  @submit="mySubmit"
        >
            <template #plus-field-step>
                <ElSteps v-if="showStep"
                         class="w-full"
                         :active="form.step.length"
                         align-center
                >
                    <ElStep v-for="item in form.step"
                            :key="item.stepId"
                            :title="item.stepName"
                    >
                        <template #description>
                            <div>{{ item.stepMessage }}</div>

                            <div>{{ item.stepTime }}</div>
                        </template>
                    </ElStep>
                </ElSteps>

                <div v-else
                     style="display: none;"
                />
            </template>

            <template #footer="{ handleSubmit }">
                <div style="margin: 0 auto">
                    <el-button @click="emits('close')">
                        返回
                    </el-button>

                    <el-button v-if="showSubmit"
                               type="primary"
                               :loading="loading"
                               @click="handleSubmit"
                    >
                        提交
                    </el-button>
                </div>
            </template>
        </PlusForm>
    </el-card>
</template>
